<!DOCTYPE html>
<html>
<head th:include="include/head">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
	<div class="wrapper">


		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<div class="container-fluid">
					<div class="row mb-2">
						<div class="col-sm-6">
							<h1>目录管理</h1>
						</div>
						<div class="col-sm-6">
							<ol class="breadcrumb float-sm-right">
								<li class="breadcrumb-item"><a href="#">首页</a></li>
								<li class="breadcrumb-item active">目录管理</li>
							</ol>
						</div>
					</div>
				</div>
				<!-- /.container-fluid -->
			</section>

			<!-- Main content -->
			<section class="content">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-12">
							<div class="card">
								<div class="card-header">
									<h3 class="card-title">目录管理</h3>
									<button type="button" class="btn btn-primary" id="add"
										th:attr="data-pId=|${pId}" style="float: right;">新增目录</button>
									<button type="button" class="btn btn-info edit" id="up"
										th:attr="data-pId=|${baseId}" th:if="${pId>0}"
										style="float: right; margin-right: 20px;">上一级</button>

								</div>
								<!-- /.card-header -->
								<div class="card-body">
									<table class="table table-bordered">
										<thead>
											<tr>
												<th style="width: 10px">#</th>
												<th>目录名称</th>
												<th>链接</th>
												<th>父级</th>
												<th>显示</th>
												<th>图例</th>
												<th style="width: 150px;">移动</th>
												<th style="width: 250px">操作</th>
											</tr>
										</thead>
										<tbody>
											<tr th:each="bean : ${list}" th:attr="id=tr_+${bean.id}">
												<td th:text="${bean.id}"></td>
												<td th:text="${bean.name}"></td>
												<td th:text="${bean.url}"></td>
												<td><cms:permission pId="${bean.pid}"></cms:permission>
												</td>
												<td th:text="${bean.isShow==1?'显示':'隐藏'}"></td>
												<td th:text="${bean.legend}"></td>
												<td>
													<button type="button" class="btn btn-primary btn-sm sortUp"
														th:attr="data-id=|${bean.id}">上移</button>
													<button type="button" class="btn btn-info btn-sm sortDown"
														th:attr="data-id=|${bean.id}">下移</button>
												</td>
												<td><a th:href="'menuList?pId='+${bean.id}"
													class="btn btn-primary btn-sm edit"><i class="fas fa-folder"></i>子目录</a>
													&nbsp;&nbsp; <a
													th:href="'menuDetail?pId='+${pId}+'&id='+${bean.id}"
													class="btn btn-info btn-sm edit"><i
														class="fas fa-pencil-alt"></i>编辑</a> &nbsp;&nbsp; <a
													href="javascript:;" th:attr="data-id=|${bean.id}"
													class="btn btn-danger btn-sm del"><i class="fas fa-trash"></i>删除</a></td>
											</tr>

										</tbody>
									</table>
								</div>
							</div>

						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
	<!-- ./wrapper -->
	<div th:include="include/foot"></div>
	<script>
		$().ready(function() {
			$("#add").click(function() {
				loadPage();
				let pId = $(this).data('pid');
				location.href = 'menuDetail?pId=' + pId;
			});
			$("#up").click(function() {
// 				loadPage();
				let pId = $(this).data('pid');
				console.log(pId);
				location.href = 'menuList?pId=' + pId;
			});
			$(".edit").click(function() {
				loadPage();
				
			});
			$(".del").click(function() {
				if (confirm('确定删除目录吗？')) {
					let id = $(this).data('id');
					$.ajax({
						url : 'menuDelete?id=' + id,
						success : function(e) {
							if (e.res) {
								$("#tr_" + id).remove();
								layer.msg('删除成功', {icon: 1})
							}
						},error:function(e){
							layer.msg(e.responseText, {icon: 5});
						}
					});
				}

			});
			$(".sortUp").click(function() {
				let id = $(this).data('id');
				let that=$(this);
				$.ajax({
					url:'moveMenu?id='+id+'&type=up',
					success:function(e){
						if(e.res){
							var objParentTR = that.parent().parent();
							var prevTR = objParentTR.prev();
							if (prevTR.length > 0) {
								prevTR.insertAfter(objParentTR);
							}
						}
					},error:function(e){
						layer.msg(e.responseText, {icon: 5});
					}
				});
				
			});
			$(".sortDown").click(function() {
				let id = $(this).data('id');
				let that=$(this);
				$.ajax({
					url:'moveMenu?id='+id+'&type=down',
				    success:function(e){
				    	if(e.res){
				    		var objParentTR = that.parent().parent();
							var nextTR = objParentTR.next();
							if (nextTR.length > 0) {
								nextTR.insertBefore(objParentTR);
							}
				    	}
				    },error:function(e){
						layer.msg(e.responseText, {icon: 5});
					}
				});
				
			});
		});
		loadPage=function(){
			window.parent.loadPage();
		}
	</script>
</body>
</html>
